<template>
  <div class="flex-col overflow-hidden bg-mobile mobileS">
    <div class="flex flex-j-e pt-14 pb-8 pr-14">
      <a-button status="danger" type="primary" shape="round" @click="logout">
        <template #icon>
          <icon-export />
        </template>
        退出登录
      </a-button>
    </div>
    <div class="pb-10">
      <a-tabs hide-content :animation="false" v-model:active-key="selectedKey" @change="tabChange">
        <a-tab-pane :key="0" :title="`${userStore.userInfo.rewardChannelStr}统计`"> </a-tab-pane>
        <a-tab-pane :key="1" title="用户统计"> </a-tab-pane>
      </a-tabs>
    </div>
    <div class="w-full flex-1 px-10">
      <transition name="fade-slide" mode="out-in" appear>
        <keep-alive>
          <component ref="childrenRef" :is="menuList[selectedKey].value" :allChannel="allChannel"></component>
        </keep-alive>
      </transition>
    </div>
  </div>
</template>
<script setup>
import User from './user/User.vue'
import Order from './order/Order.vue'
import { getSelfAllChannel } from '@/apis'
import { useUserStore } from '@/store'
import { Modal } from '@arco-design/web-vue'
const userStore = useUserStore()
const router = useRouter()
defineOptions({ name: 'dataStatistics' })

const selectedKey = ref(0)
const childrenRef = ref()
const allChannel = ref([])
const showCom = ref(false)
const getSelfAllChannelFun = () => {
  getSelfAllChannel()
    .then((res) => {
      allChannel.value = res.data
    })
    .finally(() => {
      showCom.value = true
    })
}
getSelfAllChannelFun()
const menuList = [
  { name: `${userStore.userInfo.rewardChannelStr}统计`, value: Order },
  { name: '用户统计', value: User }
]
const tabChange = (val) => {
  selectedKey.value = val
}

// 退出登录
const logout = () => {
  Modal.warning({
    title: '提示',
    content: '确认退出登录？',
    hideCancel: false,
    closable: true,
    width: 300,
    onOk: () => {
      userStore.logout()
      router.replace('/login')
    }
  })
}
</script>
<style lang="scss" scoped>
.mobileS {
  height: 100vh;
  background-color: #f3f4f5;
  &.bg-mobile {
    background-image: url('https://images.haofanhuoban.com/decoration/90f2878f3e4669534c4cdd764fdcac13.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  .text-size-17 {
    font-size: 4.53vw;
  }
  :deep(.arco-tabs-tab) {
    color: #fff !important;
    margin: 0 13vw;
  }
  :deep(.arco-tabs-nav-tab) {
    justify-content: center;
  }
  :deep(.arco-tabs-nav-ink) {
    background-color: #fff;
    width: 30px !important;
    transform: translateX(12px);
  }
  :deep(.arco-tabs-nav::before) {
    background-color: transparent !important;
  }
  :deep(.arco-tabs-tab-title::before) {
    background-color: transparent !important;
  }
}
</style>
